<template>
  <view class="demo-container">
    <!-- 基础用法 -->
    <view class="demo-block">
      <view class="demo-block__title">基础用法</view>
      <view class="demo-block__content">
        <fu-tag>标签</fu-tag>
        <fu-tag type="primary">标签</fu-tag>
        <fu-tag type="success">标签</fu-tag>
        <fu-tag type="warning">标签</fu-tag>
        <fu-tag type="danger">标签</fu-tag>
        <fu-tag type="info">标签</fu-tag>
      </view>
    </view>
    
    <!-- 空心样式 -->
    <view class="demo-block">
      <view class="demo-block__title">空心样式</view>
      <view class="demo-block__content">
        <fu-tag plain>标签</fu-tag>
        <fu-tag type="primary" plain>标签</fu-tag>
        <fu-tag type="success" plain>标签</fu-tag>
        <fu-tag type="warning" plain>标签</fu-tag>
        <fu-tag type="danger" plain>标签</fu-tag>
        <fu-tag type="info" plain>标签</fu-tag>
      </view>
    </view>
    
    <!-- 圆角样式 -->
    <view class="demo-block">
      <view class="demo-block__title">圆角样式</view>
      <view class="demo-block__content">
        <fu-tag round>标签</fu-tag>
        <fu-tag type="primary" round>标签</fu-tag>
        <fu-tag type="success" round>标签</fu-tag>
      </view>
    </view>
    
    <!-- 标记样式 -->
    <view class="demo-block">
      <view class="demo-block__title">标记样式</view>
      <view class="demo-block__content">
        <fu-tag mark>标签</fu-tag>
        <fu-tag type="primary" mark>标签</fu-tag>
        <fu-tag type="success" mark>标签</fu-tag>
      </view>
    </view>
    
    <!-- 可关闭标签 -->
    <view class="demo-block">
      <view class="demo-block__title">可关闭标签</view>
      <view class="demo-block__content">
        <fu-tag closeable @close="onClose">标签</fu-tag>
        <fu-tag type="primary" closeable @close="onClose">标签</fu-tag>
        <fu-tag type="success" closeable @close="onClose">标签</fu-tag>
      </view>
    </view>
    
    <!-- 标签大小 -->
    <view class="demo-block">
      <view class="demo-block__title">标签大小</view>
      <view class="demo-block__content">
        <fu-tag type="primary" size="small">小号标签</fu-tag>
        <fu-tag type="primary">中号标签</fu-tag>
        <fu-tag type="primary" size="large">大号标签</fu-tag>
      </view>
    </view>
    
    <!-- 自定义颜色 -->
    <view class="demo-block">
      <view class="demo-block__title">自定义颜色</view>
      <view class="demo-block__content">
        <fu-tag color="#8f2d56">标签</fu-tag>
        <fu-tag color="#8f2d56" plain>标签</fu-tag>
      </view>
    </view>
    
    <!-- 图标标签 -->
    <view class="demo-block">
      <view class="demo-block__title">图标标签</view>
      <view class="demo-block__content">
        <fu-tag type="primary" icon="home">标签</fu-tag>
        <fu-tag type="success" icon="check">标签</fu-tag>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {}
  },
  methods: {
    onClose() {
      uni.showToast({
        title: '点击了关闭',
        icon: 'none'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.demo-container {
  padding: 20rpx;
}

.demo-block {
  margin-bottom: 30rpx;
  
  &__title {
    margin-bottom: 20rpx;
    font-size: var(--fu-font-size-lg);
    color: var(--fu-text-color);
  }
  
  &__content {
    background-color: #fff;
    border-radius: var(--fu-radius-base);
    padding: 30rpx;
    display: flex;
    flex-wrap: wrap;
    gap: 20rpx;
  }
}
</style> 